.wos-app-manager {
  width: 100%;
  height: 100%;
  overflow: auto;

  .el-collapse-item__header {
    padding: 0 16px;
  }

  .app-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    grid-gap: 24px;
    justify-content: space-between;
    min-height: 0;
    padding: 8px;

    .app-item {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      justify-content: center;
      padding: 8px;

      .app-icon,
      .iconfont {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 2px;
        margin: var(--margin);
        font-size: 32px;
        text-align: center;
        cursor: pointer;
        background-color: rgb(255 255 255 / 10%);
        border-radius: 20%;
      }

      .mask {
        display: none;
      }

      &:hover {
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: column;
          gap: 8px;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background-color: var(--el-fill-color-light);
          backdrop-filter: blur(100px);
          border-radius: var(--radius);
          

          button + button {
            margin: 0;
          }
        }
      }

      &-new {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 8px;
        cursor: pointer;
        border: solid 1px var(--wos-border-color);
        border-radius: var(--radius);

        &:hover {
          background-color: var(--el-fill-color-light);
        }
      }
    }
  }
}
